<template>
  <div class="wrap">
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.MBDCopyAttribute.mbdMirrorList') }}：</label>
    </div>
    <div class="d-flex align-items-center">
      <el-tree
          :data="params.mirroDocList"
          ref="docTree"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="params.defaultKeys"
          :props="params.defaultProps">
      </el-tree>
    </div>

    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ params.mbdResult }}</label>
    </div>

    <div class="btn">
      <el-button
          type="primary"
          size="small"
          :disabled="!isConfirm"
          @click="confirm">
        {{ $t('message.MBDCopyAttribute.confirm') }}
      </el-button>
      <el-button
          size="small"
          @click="cancel">
        {{ $t('message.MBDCopyAttribute.cancel') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import {ELEMENT} from "../../../nodeApp/static/lib/vuejs/element-ui";
import {mbdCommand} from "../../Command/MbdCommand";
import DialogMixin from "./DialogMixin";

export default {
  mixins: [DialogMixin],
  data() {
    return {
      params: {
        mirroDocList: [],
        defaultKeys: [],
        defaultProps: {
          children: 'children',
          label: 'docMirrorName'
        },
        mbdResult: ""
      }
    }
  },

  mounted() {
    mbdCommand.init(400, 300, 800, () => {
      // 初始化镜像文档数据
      mbdCommand.mbdMirrorDocList("", (data) => {
        data?.data?.forEach(item => {
          this.params.mirroDocList.push(item);
          //处理顶级默认勾选的数据
          this.params.defaultKeys.push(item?.id);
        });

        //设置勾选
        this.$nextTick(() => {
          this.$refs.docTree.setCheckedKeys(this.params.defaultKeys);
        });
      });
    });
  },

  methods: {
    confirm() {
      if (this.params.mirroDocList.length === 0) {
        return;
      }

      let checkedNodes = this.getSelectedTreeNodes();
      if (checkedNodes.length > 0) {
        // 文档属性写入
        mbdCommand.mbdMirrorDocAttribute(checkedNodes, (data) => {
          //let resultMsg = "成功对称" + data + "个文档！"
          //eventBus.emit('alert', resultMsg, {type: 'success'});
          mbdCommand.closeActiveCmd();
        });
      } else {
        this.params.mbdResult = "没有选中的文档节点。"
      }
    },

    cancel() {
      mbdCommand.closeActiveCmd();
    },

    getSelectedTreeNodes() {
      const tree = this.$refs.docTree;
      let selectedNodes = tree.getCheckedNodes();
      return selectedNodes;
    },

    changePluginContainerHeight() {
      mbdCommand.changePluginContainerHeight({minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight})
    }
  },

  watch: {},

  computed: {
    isConfirm() {
      if (this.params.mirroDocList.length > 0) {
        return true;
      }
      return false;
    }
  }
}
</script>

<style scoped>
.wrap {
  font-size: 12px;
}

label {
  color: var(--text-color1);
  font-family: "微软雅黑";
  font-size: 14px;
  margin-left: 5px;
}

label result {
  font-size: 14px;
  margin-left: 5px;
  margin-top: 30px;
}

.el-tree {
  width: 100%;
}
</style>